<template>
  <div class="my-step">
    <ul>
      <li v-for="(item, index) in stepArr" :class="{ active: index == activeIndex }" @click="toStep(index)">
        <i :class="item.icon"></i>
        <span>{{ item.txt }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'jbstep',
  dicts: ['sys_normal_disable'],
  props: {
    activeStep: {
      type: [String, Number],
      default: '0'
    }
  },
  watch: {
    activeStep(val) {
      console.log(val)
      this.activeIndex = val
    }
  },
  data() {
    return {
      activeIndex: '',
      stepArr: [
        {
          icon: 'el-icon-edit',
          txt: '基本信息'
        },
        {
          icon: 'el-icon-share',
          txt: '负责人任职'
        },
        {
          icon: '',
          txt: '现有内设机构'
        },
        {
          icon: '',
          txt: '内部建设'
        },
        {
          icon: '',
          txt: '党建工作情况'
        },
        {
          icon: '',
          txt: '财务会计报告'
        },
        {
          icon: '',
          txt: '资产负债表'
        },
        {
          icon: '',
          txt: '业务活动表'
        },
        {
          icon: '',
          txt: '现金流量表'
        },
        {
          icon: '',
          txt: '捐赠资助/使用'
        },
        {
          icon: '',
          txt: '公益慈善支出'
        },
        {
          icon: '',
          txt: '上年度整改'
        }
      ]
    }
  },
  created() { },
  methods: {
    toStep(index) {
      this.$emit('backStep', index)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-switch.is-disabled {
  opacity: 1;
}

.my-step {
  ul {
    display: flex;
    justify-content: space-between;
    list-style: none;

    li {
      width: 110px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      // font-size: 16px;
      background: #eee;
      position: relative;

      &::before {
        position: absolute;
        display: inline-block;
        left: 0;
        top: 0;
        content: '';
        width: 12px;
        height: 40px;
        background: #fff;
        -webkit-clip-path: polygon(0 0, 12px 20px, 0px 30px);
        clip-path: polygon(0 0, 12px 20px, 0px 40px);
        z-index: 1;
      }

      &::after {
        position: absolute;
        display: inline-block;
        right: -12px;
        top: -0px;
        content: '';
        width: 12px;
        height: 40px;
        background: #eee;
        -webkit-clip-path: polygon(0 0, 12px 20px, 0px 30px);
        clip-path: polygon(0 0, 12px 20px, 0px 40px);
        z-index: 9;
      }

      &.active {
        color: #fff;
        // padding: 10px 20px;
        background-color: #2652b3;
        position: relative;

        &::before {
          position: absolute;
          display: inline-block;
          left: 0px;
          top: 0px;
          content: '';
          width: 12px;
          height: 40px;
          background: #fff;
          -webkit-clip-path: polygon(0 0, 12px 20px, 0px 30px);
          clip-path: polygon(0 0, 12px 20px, 0px 40px);
        }

        &::after {
          position: absolute;
          display: inline-block;
          right: -12px;
          top: -0px;
          content: '';
          width: 12px;
          height: 40px;
          background: #2652b3;
          -webkit-clip-path: polygon(0 0, 12px 20px, 0px 30px);
          clip-path: polygon(0 0, 12px 20px, 0px 40px);
        }
      }
    }
  }
}
</style>
